<template>
  <div>
    <Header></Header>
    <div style="max-width: 1000px; margin:auto">
      <el-row style="margin-top: 40px;margin-bottom: 40px">
        <el-col :span="12">
          <div style="font-size: 25px;margin-top: 5px">
            我的项目
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mybtn" style="float: right" @click="$router.push('/create')">
            创建项目
          </div>
        </el-col>
      </el-row>
      <div v-if="projects.length === 0" style="
      text-align: center;color: #777777;background-color: white;height: 100px;padding-top: 80px;">
        暂时没有项目，点击右上角
        <span @click="$router.push('/create')" style="cursor: pointer;color: #9dc15b">
          创建项目
        </span>
        吧
      </div>
      <div v-for="item in this.projects">
        <ProjectBrief :item="item" :is-my="true"></ProjectBrief>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ProjectBrief from "@/components/ProjectBrief";
export default {
  name: "My",
  components: {ProjectBrief, Header},
  data(){
    return {
      projects:[],
    }
  },
  mounted() {
    this.$axios('project/getusers/',{
      params:{
        token:localStorage.getItem("token")
      }
    }).then(res=>{
      if(res.status === 200) {
        this.projects = res.data
        for(let project of this.projects){
          project.isdeleting = false;
        }
      }else if(res.status === 201){
        this.$router.push('user')
      }
    })
  }
}
</script>

<style scoped>
.mybtn{
  font-size: 18px;
  font-weight: bold;
  background: #333333;
  color: white;
  padding: 13px 35px;
  transition: all 0.3s;
}
.mybtn:hover{
  background: #9dc15b;
  color: #333333;
  transition: all 0.3s;
  cursor: pointer;
}
</style>